/*
  学习目标：props的两大特点
  步骤：
     1. props可以接受任意数据类型
      1.1 string、number、boolean、undefined、null
      1.2  对象、数组
      1.3 💥函数、JSX
    2. props是单项数据流
*/
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child
          name="zs"
          age={18}
          // boolean
          isShow={true}
          un={undefined}
          nu={null}
          zs={{ intro: '狂徒' }}
          list={[1, 2, 3]}
          // 💥
          fn={() => alert(132)}
          title={<i>我斜了</i>}
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    console.log('this  ----->  ', this.props);
    return (
      <div>
        {this.props.list.map((item) => {
          return <h1 key={item}>{item}</h1>;
        })}
        <button
          onClick={() => {
            // ❌ 报错, props是只读的
            this.props.name = '狂徒';
            // ❌ 不会触发界面更新,
            this.props.list.push(4);
          }}
        >
          点我修改props的数据
        </button>
      </div>
    );
  }
}
